<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="secured" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<secured:authorize ifAnyGranted="ROLE_VER_CLIENTES">
<head>
	
</head>
<body>
	<h3><spring:message code="etiqueta.gestionClientes" text="Gestión de clientes" /></h3>
	
	<div class="filtro">
		<label class="horizontal"><spring:message code="etiqueta.filtrar" text="Filtrar por" /></label>
		<input class="horizontal" type="text" id="filtrado" autofocus="autofocus" />
		<span></span>
	</div>
	
	<div class="listado horizontal"></div>
	
	<div class="reportes">
		<span><spring:message code="etiqueta.exportar" text="Exportar a" /></span>
		<button onclick="javascript:xls();"><spring:message code="etiqueta.xls" text="XLS" /></button>
		<button onclick="javascript:pdf();"><spring:message code="etiqueta.pdf" text="PDF" /></button>
	</div>
	
	<!-- JAVASCRIPT -->
	<script type="text/javascript">
		var datos = [];
		var tabla;
		var cabezales = [
   			'<spring:message code="etiqueta.tipoCliente" text="Tipo de cliente" />',
   			'<spring:message code="etiqueta.nombre" text="Nombre" />',
   			'<spring:message code="etiqueta.apellido" text="Apellido" />',
   			'<spring:message code="etiqueta.razonSocial" text="Razón Social" />',
   			'<spring:message code="etiqueta.estado" text="Estado" />',
   			'<spring:message code="etiqueta.correoElectronico" text="Correo electrónico" />',
   			'<spring:message code="etiqueta.telefono" text="Teléfono" />',
   			'<spring:message code="etiqueta.celular" text="Celular" />',
   			''
   		];
	
		jQuery(document).ready(function(){	
   			actualizar();

   			jQuery('#filtrado').on('keyup', function (event) {
   			  	var value = ('' + this.value).toLowerCase(), row, col;
   			 	var filtro = [], registros;
   			 	if (value) {
   			    	for (row = 0; row < datos.length; row++) {
   	   			    	var fila = datos[row];
   	   			  		var incluido = false;
   			      		for (col = 0; col < fila.length; col++) {
   			      			var texto = '' + datos[row][col];
   			      			if ((texto).toLowerCase().indexOf(value) > -1) {
   	   			      			if(incluido == false) {
   	   			      				filtro.push(fila);
   	   			      				incluido = true;
   	   	   			      		}
   			      			}
	  			      	}
   			    	}
   			    	registros = filtro.length;
   			    	tabla.handsontable('loadData', filtro);
   			  	} else {
   			  		registros = datos.length;
   			  		tabla.handsontable('loadData', datos);
   	   			}
   			 	mensajeListado(registros);
   			});
   			
   			jQuery('button').button();
   		});

   		function actualizar() {
   			jQuery.ajax(
			    {
			        url: "clientes.json",
			        cache: false,
			        contentType: 'application/json; charset=UTF-8',
			        data:{
				        accion: 'LISTAR'
				    },
			        dataType: 'json'
			    }
			).done(
	   			function(clientes) {
	   				datos = [];
	   				
		   			//Datos
		   			if(clientes.length > 0){
	       				jQuery.each(clientes, function(index, value){
	       					var cliente = jQuery(value)[0];
	       					var id = cliente.id;
	       					var bloqueado = cliente.bloqueado;
	       					var tipo = cliente.tipo;

	       					var nombre = '', apellido = '', razonSocial = '', correoElectronico = '', telefono = '', celular = '', estado = '';
	       					if(bloqueado) {
		       					estado = '<spring:message code="etiqueta.estado.BLOQUEADO" text="Bloqueado" />';
		       				} else {
		       					estado = '<spring:message code="etiqueta.estado.DESBLOQUEADO" text="Desbloqueado" />';
			       			}

	       					switch (tipo) {
	       						case 'PERSONA':
		       						nombre = cliente.primerNombre;
		       						apellido = cliente.apellido;
		       						correoElectronico = cliente.correoElectronico;
		       						telefono = cliente.telefono;
		       						celular = cliente.celular;
		       						break;
	       						case 'EMPRESA':
		       						nombre = cliente.nombre;
		       						razonSocial = cliente.razonSocial;
		       						break;
	       					}
	       					
		       				datos.push([
								tipo,
								tooltip(nombre, 0, 30),
								tooltip(apellido, 0, 30),
								tooltip(razonSocial, 0, 30),
								estado,
								tooltip(correoElectronico, 0, 30),
								tooltip(telefono, 0, 30),
								tooltip(celular, 0, 30),
								links(id, bloqueado)
		    		       	]);
	       				});
		   			}

		   			mensajeListado(datos.length);

		   			tabla = $(".listado").handsontable(
	   	   		   		{
	   	   		   			autoWrapRow: true,
	   	   		   			colHeaders : cabezales,
	   	   		   			colWidths : [100, 100, 100, 150, 100, 150, 95, 95, 210],
			   	   		   	columns: [
			   	   		   	    {data: 0},
			   	   		   	    {data: 1, type: {renderer: textoHtml}},
			   	   		   	    {data: 2, type: {renderer: textoHtml}},
			   	   		   	    {data: 3, type: {renderer: textoHtml}},
			   	   		   	    {data: 4},
			   	   		   	    {data: 5, type: {renderer: textoHtml}},
			   	   		  		{data: 6, type: {renderer: textoHtml}},
			   	   		   	    {data: 7, type: {renderer: textoHtml}},
			   	   		  		{data: 8, type: {renderer: textoHtml}}
			   	   		   	  ],
	   	   		   			columnSorting : true,
	   	   		   			contextMenu : false,
	   	   		   			currentRowClassName : 'seleccionado',
	   	   	   		   		data: datos,
	   	   	   		   		maxCols : 9,
	   	   	   				minCols : 9,
	   	   	   		  		stretchH: 'last'
	   	   	   		   	}
	   	   	   		);
   		   		}
   		   	);
   	   	}

   	   	function links(id, bloqueado) {
   	   	   	var texto = 
   	   	   	   	'<span class="link" style="width: 33%;">' + 
   	   	   	   		'<a class="link-accion" href="javascript:redirige(&quot;clientes.do?accion=ACTUALIZAR&id=' + id + '&quot;);"><spring:message code="etiqueta.ver" text="Ver" /></a>' +
   	   	   	   	'</span>';

   	   	  	texto += '<span class="link" style="width: 33%;">';
   	  		<secured:authorize ifAnyGranted="ROLE_BLOQUEAR_CLIENTE">
   	  		if(bloqueado) {
   	   	  		texto += '<a class="link-accion" href="javascript:bloqueo(' + id + ", " + bloqueado + ');"><spring:message code="etiqueta.desbloquear" text="Desbloquear" /></a>';
   	   	   	} else {
   	   	   		texto += '<a class="link-accion" href="javascript:bloqueo(' + id + ", " + bloqueado + ');"><spring:message code="etiqueta.bloquear" text="Bloquear" /></a>';
   	   	   	}
	  		</secured:authorize>
	  		texto += '</span>';

	  		texto += '<span class="link" style="width: 33%;">';
	  		<secured:authorize ifAnyGranted="ROLE_ELIMINAR_CLIENTE">
	  		texto += '<a class="link-accion" href="javascript:eliminar(' + id + ');"><spring:message code="etiqueta.eliminar" text="Eliminar" /></a>';
	  		</secured:authorize>
	  		texto += '</span>';

   	   	   	return texto;
   	   	}
   		
   		<secured:authorize ifAnyGranted="ROLE_BLOQUEAR_CLIENTE">
		function bloqueo(id, bloqueado) {
			accion(id, (bloqueado ? 'DESBLOQUEAR' : 'BLOQUEAR'));
		}
   		</secured:authorize>

   		<secured:authorize ifAnyGranted="ROLE_ELIMINAR_CLIENTE">
		function eliminar(id) {
			accion(id, 'ELIMINAR');
		}
   		</secured:authorize>

   		<secured:authorize ifAnyGranted="ROLE_BLOQUEAR_CLIENTE, ROLE_ELIMINAR_CLIENTE">
		function accion(id, accion) {
			jQuery.ajax(
			    {
			        url: "clientes.json",
			        cache: false,
			        contentType: 'application/json; charset=UTF-8',
			        dataType: 'json',
			        data: {
				        accion: accion,
				        id: id
				    }
			    }
			).done(
				function(json){
					if(json.mensaje != "OK") {
						mensajeError(json.mensaje, false, null);
					}
					actualizar();
				}
			);
		}
		</secured:authorize>

   		function xls() {
   	   		var headers = jQuery.toJSON(tabla.handsontable('getColHeader')).toString();
			var datos = jQuery.toJSON(tabla.handsontable('getData')).toString();
   	   		 
			reporte('XLS', 'CLIENTES', headers, datos);
   	   	}

   	   	function pdf() {
	   	   	var headers = jQuery.toJSON(tabla.handsontable('getColHeader')).toString();
			var datos = jQuery.toJSON(tabla.handsontable('getData')).toString();
		   		 
			reporte('PDF', 'CLIENTES', headers, datos);
   	   	}
    </script>
</body>
</secured:authorize>